<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Blogs/标签</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

</head>
<body>

<div th:replace="commons/bar::#header(activeUrl='tag.html')"></div>


<div  class="navbar" id="app" >
    <div class="container list-group-item" style="width: 60%">
        <div class="navbar main-title">
            <span class="navbar-left main-title-left">标签</span>
            <div class="navbar-right main-title-right">共<span >{{blogsInfo.total}}</span>篇</div>
        </div>
        <div class=" label-div text-center">
            <a v-for="(tag,index) in tagList.list" :class="['label',tag.id==flag?'label-actice':'']" @click="tagActive(tag.id)" v-cloak>{{tag.name}}</a>
        </div>
        <div>
            <div class="neirong" v-for="(blogs,index) in blogsInfo.list" @click="details(blogs.id)">
                <h3 style="font-weight: bold;">{{blogs.title}}</h3>
                <div class="neirong_top navbar " style=" width: 100%;">
                    <span class="left-span navbar-left " >{{blogs.content}}</span>
                    <img :src="blogs.path" class="img-rounded right-img navbar-right"/>
                </div>
                <div class="neirong_bottom">
                    <img :src="blogs.user.icon" class="img-rounded left-img"/>
                    <span>{{blogs.user.username}}</span>
                    <span>{{blogs.time}}</span>
                    <i class="glyphicon glyphicon-eye-open"></i>
                    <span>{{blogs.browse==null?0:blogs.browse}}</span>
                    <span class="renzheng img-rounded navbar-right">认证</span>
                </div>
                <hr>
            </div>
        </div>

        <nav aria-label="..." class="main-pages">
            <ul class="pager">
                <li id="prev" :class="['previous',blogsInfo.pageNum==1?'disabled':'']"><a @click.prevent="prev"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li id="next" :class="['next',blogsInfo.pageNum==blogsInfo.pages?'disabled':'']"><a @click.prevent="next">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>
    </div>


</div>

<div th:replace="commons/bar::#footer"/>


<script th:src="@{/js/jquery.min.js}"/>
<script type="application/javascript" th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>


<script>

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                tagList:[],
                blogsInfo:[],
                flag:-1,
                search:{
                    page:1,
                    size:5,
                    title:null,
                    classifyId:0,
                    tagId:0,
                    recommend:0
                }
            }
        },
        methods:{
            tagActive:function(id){
                this.search.page = 1;
                if(this.flag != id){
                    this.flag = id;
                    this.search.tagId = id;
                    var that = this;
                    this.ajax("get","/blogs/blogs","blogsInfo",that.search)
                }
                else{
                    this.flag = -1;
                    this.search.tagId =0;
                    var that = this;
                    this.ajax("get","/blogs/blogs","blogsInfo",that.search)
                }

            },
            ajax:function(method,url,vari,data){
                var that = this;
                $.ajax({
                    type:method,
                    url:url,
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    data:data,
                    success:function(res){
                        if(method=="get"){
                            console.log(res);
                        }
                        that[vari] = res;
                    },
                    error:function(res){
                        console.log(res);
                    }
                })
            },
            details:function(id){
                window.location.href="details.html?active="+id;
            },
            next:function(){
                if(this.blogsInfo.pageNum+1<=this.blogsInfo.pages){
                    var that = this;
                    this.search.page = that.blogsInfo.nextPage;
                    this.ajax("get","/blogs/blogs","blogsInfo",that.search)
                }

            },
            prev:function(){
                if(this.blogsInfo.pageNum-1>0){
                    var that = this;
                    this.search.page = that.blogsInfo.prePage;
                    this.ajax("get","/blogs/blogs","blogsInfo",that.search)
                }
            },
            getParameter:function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if( r != null ) return decodeURI( r[2] ); return null;
            },
        },
        created(){
            var id = this.getParameter("active");
            this.ajax("get","/blogs/tag","tagList",{page:0,size:0})
            if(!id){
                var that = this;
                this.ajax("get","/blogs/blogs","blogsInfo",that.search)
            }else{
                this.tagActive(id);
            }

        }
    })


</script>

</body>
</html>